

<template>
    <div>
		<div class='head'>
			<div class="top"></div>
			<div class="menu">
				<div class="ul-prt">
					<ul class="vertical-center wraps top-ul">
						<li class="nav-top-list__li logo"><img src="../../../static/img/logo.png"></li>
						<li class="nav-top-list__li menu-li menu-li-active">首页</li>
						<li class="nav-top-list__li menu-li">成功故事</li>
						<li class="nav-top-list__li menu-li">意见反馈</li>
						<li class="nav-top-list__li menu-li">关于我们</li>
						<li class="nav-top-list__rightInfo">
							<a href=""><img src="../../../static/img/avatar.jpg"></a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<div class='main'>
			<div class="search wraps">
				<div class="space-between search-list div-padding">
					<div class="base">搜索：</div>
					<div class="base">
						<el-radio v-model="sex" label="nan">男</el-radio>
  						<el-radio v-model="sex" label="nv">女</el-radio>
					</div>
					<div>
						<label for="age">年龄:</label>
						<el-select v-model="startAge" placeholder="年龄" class="select-age">
							<el-option
								v-for="item in ageJson"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
						<span>~</span>
						<el-select v-model="endAge" placeholder="年龄" class="select-age">
							<el-option
								v-for="item in ageJson"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
					<div>
						<label for="age">身高:</label>
						<el-select v-model="startStature" placeholder="年龄" class="select-stature">
							<el-option
								v-for="item in statureJson"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
						<span>~</span>
						<el-select v-model="endStature" placeholder="年龄" class="select-stature">
							<el-option
								v-for="item in statureJson"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="select-width">
						<el-cascader
							size="large"
							:options="options"
							v-model="currentArea"
    						:props="{ expandTrigger: 'hover' }"
							placeholder="现居地"
							:show-all-levels="false"
							@change="handleChange">
    					</el-cascader>
					</div>
					<div class="select-width">
						<el-cascader
							size="large"
							:options="options"
							v-model="area"
    						:props="{ expandTrigger: 'hover' }"
							placeholder="原籍地"
							:show-all-levels="false"
							@change="handleChange">
    					</el-cascader>
					</div>
					<div>
						<el-button type="primary" icon="el-icon-search">搜索</el-button>
					</div>
				</div>
			</div>

			<div class="user-list wraps">
				<div class="div-padding">
					<div class="user-line">
						<div class="user">
							<div class="user-detail">
								<div class="user-img"><img src="../../../static/img/user.jpg" alt=""></div>
								<div class="user-info">
									<div>基本信息：女 33岁 166cm</div>
									<div>原籍地址：湖北 武汉市 江汉区</div>
									<div>现居地址：湖北 武汉市 江汉区</div>
								</div>
							</div>
						</div>
						<div class="user">
							<div class="user-detail">
								<div class="user-img"><img src="../../../static/img/user.jpg" alt=""></div>
								<div class="user-info">
									<div>基本信息：女 33岁 166cm</div>
									<div>原籍地址：湖北 武汉市 江汉区</div>
									<div>现居地址：湖北 武汉市 江汉区</div>
								</div>
							</div>
						</div>
						<div class="user">
							<div class="user-detail">
								<div class="user-img"><img src="../../../static/img/user.jpg" alt=""></div>
								<div class="user-info">
									<div>基本信息：女 33岁 166cm</div>
									<div>原籍地址：湖北 武汉市 江汉区</div>
									<div>现居地址：湖北 武汉市 江汉区</div>
								</div>
							</div>
						</div>
						<div class="user">
							<div class="user-detail">
								<div class="user-img"><img src="../../../static/img/user.jpg" alt=""></div>
								<div class="user-info">
									<div>基本信息：女 33岁 166cm</div>
									<div>原籍地址：湖北 武汉市 江汉区</div>
									<div>现居地址：湖北 武汉市 江汉区</div>
								</div>
							</div>
						</div>
						<div class="user">
							<div class="user-detail">
								<div class="user-img"><img src="../../../static/img/user.jpg" alt=""></div>
								<div class="user-info">
									<div>基本信息：女 33岁 166cm</div>
									<div>原籍地址：湖北 武汉市 江汉区</div>
									<div>现居地址：湖北 武汉市 江汉区</div>
								</div>
							</div>
						</div>
					</div>

					<div class="user-line">
						<div class="user">
							<div class="user-detail">
								<div class="user-img"><img src="../../../static/img/user.jpg" alt=""></div>
								<div class="user-info">
									<div>基本信息：女 33岁 166cm</div>
									<div>原籍地址：湖北 武汉市 江汉区</div>
									<div>现居地址：湖北 武汉市 江汉区</div>
								</div>
							</div>
						</div>
						<div class="user">
							<div class="user-detail">
								<div class="user-img"><img src="../../../static/img/user.jpg" alt=""></div>
								<div class="user-info">
									<div>基本信息：女 33岁 166cm</div>
									<div>原籍地址：湖北 武汉市 江汉区</div>
									<div>现居地址：湖北 武汉市 江汉区</div>
								</div>
							</div>
						</div>
						<div class="user">
							<div class="user-detail">
								<div class="user-img"><img src="../../../static/img/user.jpg" alt=""></div>
								<div class="user-info">
									<div>基本信息：女 33岁 166cm</div>
									<div>原籍地址：湖北 武汉市 江汉区</div>
									<div>现居地址：湖北 武汉市 江汉区</div>
								</div>
							</div>
						</div>
						<div class="user">
							<div class="user-detail">
								<div class="user-img"><img src="../../../static/img/user.jpg" alt=""></div>
								<div class="user-info">
									<div>基本信息：女 33岁 166cm</div>
									<div>原籍地址：湖北 武汉市 江汉区</div>
									<div>现居地址：湖北 武汉市 江汉区</div>
								</div>
							</div>
						</div>
						<div class="user">
							<div class="user-detail">
								<div class="user-img"><img src="../../../static/img/user.jpg" alt=""></div>
								<div class="user-info">
									<div>基本信息：女 33岁 166cm</div>
									<div>原籍地址：湖北 武汉市 江汉区</div>
									<div>现居地址：湖北 武汉市 江汉区</div>
								</div>
							</div>
						</div>
					</div>

					<div class="user-line">
						<div class="user">
							<div class="user-detail">
								<div class="user-img"><img src="../../../static/img/user.jpg" alt=""></div>
								<div class="user-info">
									<div>基本信息：女 33岁 166cm</div>
									<div>原籍地址：湖北 武汉市 江汉区</div>
									<div>现居地址：湖北 武汉市 江汉区</div>
								</div>
							</div>
						</div>
						<div class="user">
							<div class="user-detail">
								<div class="user-img"><img src="../../../static/img/user.jpg" alt=""></div>
								<div class="user-info">
									<div>基本信息：女 33岁 166cm</div>
									<div>原籍地址：湖北 武汉市 江汉区</div>
									<div>现居地址：湖北 武汉市 江汉区</div>
								</div>
							</div>
						</div>
						<div class="user">
							<div class="user-detail">
								<div class="user-img"><img src="../../../static/img/user.jpg" alt=""></div>
								<div class="user-info">
									<div>基本信息：女 33岁 166cm</div>
									<div>原籍地址：湖北 武汉市 江汉区</div>
									<div>现居地址：湖北 武汉市 江汉区</div>
								</div>
							</div>
						</div>
						<div class="user">
							<div class="user-detail">
								<div class="user-img"><img src="../../../static/img/user.jpg" alt=""></div>
								<div class="user-info">
									<div>基本信息：女 33岁 166cm</div>
									<div>原籍地址：湖北 武汉市 江汉区</div>
									<div>现居地址：湖北 武汉市 江汉区</div>
								</div>
							</div>
						</div>
						<div class="user">
							<div class="user-detail">
								<div class="user-img"><img src="../../../static/img/user.jpg" alt=""></div>
								<div class="user-info">
									<div>基本信息：女 33岁 166cm</div>
									<div>原籍地址：湖北 武汉市 江汉区</div>
									<div>现居地址：湖北 武汉市 江汉区</div>
								</div>
							</div>
						</div>
					</div>

					
					<div style="text-align:center">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="currentPage4"
							:page-sizes="[20, 30, 50, 100]"
							:page-size="20"
							layout="total, sizes, prev, pager, next, jumper"
							:total="400">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>

		<div class='footer'></div>
	</div>
</template>

<script type="text/javascript">

  import { provinceAndCityDataPlus } from 'element-china-area-data'

	export default {
		data () {
			return {
				message: '',
				sex: 'nan',
				options: provinceAndCityDataPlus,
        		currentArea: [],
				area: [],
				ageJson: '',
				statureJson: '',
				startAge: '20',
				endAge: '20',
				startStature: '150',
				endStature: '170'
			}
		},
		methods: {
			handleChange (value) {
				console.log(value)
			}
		},
		created () {
			this.ageJson = require('../../../static/data/age.json');
			this.statureJson = require('../../../static/data/stature.json');
		}

	}
</script>

<style>
	body{
		background: #E6E6E6;
	}

	.footer{
		height: 100px;
	}

	.user{
		width: 162px;
		height: 185px;
		overflow: hidden;
	}
	.user-detail:hover{
		width:280px;
		box-shadow:15px 12px 16px #888;
		position: absolute;
		z-index: 100;
		background: #fff;
		cursor: pointer;
	}

	.menu-li-active{
		background: #E6E6E6;
		color: red;
	}

	.menu-li:hover{
		background: #f4f4f4;
	}

	.user-detail:hover .user-info{
		margin:0;
	}

	.user-info{
		margin-left: -75px;
	}

	.user-img{
		width: 100%;
    	text-align: -webkit-center;
		height: 75%;
	}

	.user-img img{
		width: 100%;
    	height: 100%;
	}

	.main{
		padding-top: 20px;
	}

	.div-padding{
		background: #fff;
    	padding: 20px;
	}

	.search{
    	background: #fff;
	}

	.menu{
		border-bottom: 1px solid #e1e2e6;
    	background: #fff;
	}

	.select-age{
		width: 76px;
	}

	.select-stature{
		width: 92px;
	}

	.select-width{
		width: 130px;
	}

	.search-list{
		justify-content: space-between;
	}

	.search .base{
		height: 40px;
    	line-height: 40px;
	}

	.search .base label{
		margin-right: 11px;
	}

	.top{
		background-image: url(../../../static/img/top.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		height: 67px;
	}

	.space-between, .vertical-center {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.menu .logo img{
		height: 36px;
	}

	.nav-top-list__rightInfo {
		margin: 0!important;
		position: absolute!important;
		right: 0;
		top: 17px;
		cursor: pointer;
	}

	.top-ul{
		position: relative;
		padding-top: 20px;
	}

	.nav-top-list__rightInfo img{
		width: 28px;
		height: 28px;	
	}

	ol, ul {
		list-style: none;
	}

	.nav-top-list__li {
		-webkit-transition: .1s;
		-o-transition: .1s;
		transition: .1s;
		line-height: 36px;
		font-size: 18px;
		padding: 0 40px;
		position: relative;
		cursor: pointer;
	}

	.menu ul li {
		float: left;
		font-size: 16px;
	}

	.wraps {
		width: 1100px;
		margin: 0 auto;
	}

	img{
		display: block;
		margin: 0;
		padding: 0;
	}

	.user-line{
		margin-bottom: 40px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
</style>